/*交接班页面*/
import React, {Component} from 'react';
import {StatusBar, Keyboard, TouchableNativeFeedback, Text, View, ImageBackground, Image, TextInput, Button, StyleSheet, PixelRatio, Dimensions,ProgressBarAndroid} from 'react-native';
import Modal from 'react-native-modalbox';
import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button'
import axios from 'axios';
import storeActions from '../../../store/actions/store';
import {bindActionCreators} from 'redux';
import {is, fen_to_yuan} from '../../../utils';
import {Actions} from "react-native-router-flux";
import {connect} from "react-redux";

import NavBar from '../../widget/navBar';
import CXIcon from '../../../style/icon/CXIcon';
import styles, {mainBackgroundColor, white} from "../../../style/global";
import loginActions from "../../../store/actions/login";

var screen = Dimensions.get('window');//获取设备尺寸

class LoginOut extends Component{
    constructor(props){
        super(props);
        this.state = {
            clerkInfo: '',
            loginTime: ''
        }
    }
    componentDidMount(){
        let {loginAction} = this.props;
        loginAction.getStatisticsDetail();

        storage.load({
            key: 'clerk-info'
        }).then(res => {
            this.setState({
                clerkInfo: res
            })
        });

       storage.load({
            key: 'login-time'
        }).then(res => {
           this.setState({
               loginTime: res
           })
        });


    }
    //渲染总销售额
    _renderSales(){
        let{loginState} = this.props;
        if(loginState.statisticsDetail.sales){
            return(
                <View style={style.flex1}>
                    <Text style={style.topic}>总销售额</Text>
                    <Text style={style.num}>{fen_to_yuan(loginState.statisticsDetail.sales.total_amount)}</Text>

                    {/*进度条列表*/}
                    <View>
                        <View style={style.progressLi}>
                            <View style={[style.titleInfo]}>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.sales.cash_amount != 0 ? style.nameInfoActive : '']}>现金</Text>
                                <Text style={[style.nameInfo,,loginState.statisticsDetail.sales.cash_amount != 0 ? style.nameInfoActive : '']}>{fen_to_yuan(loginState.statisticsDetail.sales.cash_amount)}</Text>
                            </View>
                            <ProgressBarAndroid
                                styleAttr="Horizontal"
                                indeterminate={false}
                                color={"#4B8AF2"}
                                progress={loginState.statisticsDetail.sales.total_amount ? loginState.statisticsDetail.sales.cash_amount/loginState.statisticsDetail.sales.total_amount : 0}
                            />
                        </View>
                        <View style={style.progressLi}>
                            <View style={style.titleInfo}>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.sales.pop_amount != 0 ? style.nameInfoActive : '']}>银行卡</Text>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.sales.pop_amount != 0 ? style.nameInfoActive : '']}>{fen_to_yuan(loginState.statisticsDetail.sales.pop_amount)}</Text>
                            </View>
                            <ProgressBarAndroid
                                styleAttr="Horizontal"
                                indeterminate={false}
                                color={"#4B8AF2"}
                                progress={loginState.statisticsDetail.sales.total_amount ? loginState.statisticsDetail.sales.pop_amount/loginState.statisticsDetail.sales.total_amount : 0}
                            />
                        </View>
                        <View style={style.progressLi}>
                            <View style={style.titleInfo}>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.sales.wx_pay_amount != 0 ? style.nameInfoActive : '']}>微信</Text>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.sales.wx_pay_amount != 0 ? style.nameInfoActive : '']}>{fen_to_yuan(loginState.statisticsDetail.sales.wx_pay_amount)}</Text>
                            </View>
                            <ProgressBarAndroid
                                styleAttr="Horizontal"
                                indeterminate={false}
                                color={"#4B8AF2"}
                                progress={loginState.statisticsDetail.sales.total_amount ? loginState.statisticsDetail.sales.wx_pay_amount/loginState.statisticsDetail.sales.total_amount : 0}
                            />
                        </View>
                        <View style={style.progressLi}>
                            <View style={style.titleInfo}>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.sales.ali_pay_amount != 0 ? style.nameInfoActive : '']}>支付宝</Text>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.sales.ali_pay_amount != 0 ? style.nameInfoActive : '']}>{fen_to_yuan(loginState.statisticsDetail.sales.ali_pay_amount)}</Text>
                            </View>
                            <ProgressBarAndroid
                                styleAttr="Horizontal"
                                indeterminate={false}
                                color={"#4B8AF2"}
                                progress={loginState.statisticsDetail.sales.total_amount ? loginState.statisticsDetail.sales.ali_pay_amount/loginState.statisticsDetail.sales.total_amount : 0}
                            />
                        </View>
                        <View style={style.progressLi}>
                            <View style={style.titleInfo}>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.sales.balance_pay_amount != 0 ? style.nameInfoActive : '']}>余额</Text>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.sales.balance_pay_amount != 0 ? style.nameInfoActive : '']}>{fen_to_yuan(loginState.statisticsDetail.sales.balance_pay_amount)}</Text>
                            </View>
                            <ProgressBarAndroid
                                styleAttr="Horizontal"
                                indeterminate={false}
                                color={"#4B8AF2"}
                                progress={loginState.statisticsDetail.sales.total_amount ? loginState.statisticsDetail.sales.balance_pay_amount/loginState.statisticsDetail.sales.total_amount : 0}
                            />
                        </View>
                        <View style={style.progressLi}>
                            <View style={style.titleInfo}>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.refund.refundAmount != 0 ? style.nameInfoActive : '']}>退款金额</Text>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.refund.refundAmount != 0 ? style.nameInfoActive : '']}>{fen_to_yuan(loginState.statisticsDetail.refund.refundAmount)}</Text>
                            </View>
                            <ProgressBarAndroid
                                styleAttr="Horizontal"
                                indeterminate={false}
                                color={"#4B8AF2"}
                                progress={loginState.statisticsDetail.refund.refundAmount ? 1 : 0}
                            />
                        </View>

                    </View>

                </View>
            )
        }
    }
    //渲染总现金
    _renderCash(){
        let{loginState} = this.props;
        if(loginState.statisticsDetail.cash){
            let cash = loginState.statisticsDetail.cash.yesterday_surplus_amount+loginState.statisticsDetail.cash.today_income+loginState.statisticsDetail.cash.today_outcome;
            console.log('总额', cash);

            return(
                <View style={style.flex1}>
                    <Text style={style.topic}>总现金</Text>
                    <Text style={style.num}>{fen_to_yuan((loginState.statisticsDetail.cash.today_income-loginState.statisticsDetail.cash.today_outcome))}</Text>
                    <View>
                        <View style={style.progressLi}>
                            <View style={style.titleInfo}>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.cash.yesterday_surplus_amount==0?style.nameInfoActive:'']}>昨日结余</Text>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.cash.yesterday_surplus_amount==0?style.nameInfoActive:'']}>{fen_to_yuan(loginState.statisticsDetail.cash.yesterday_surplus_amount)}</Text>
                            </View>
                            <ProgressBarAndroid
                                styleAttr="Horizontal"
                                indeterminate={false}
                                color={"#4B8AF2"}
                                progress={cash ? loginState.statisticsDetail.cash.yesterday_surplus_amount/cash : 0}
                            />
                        </View>
                        <View style={style.progressLi}>
                            <View style={style.titleInfo}>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.cash.today_income==0?style.nameInfoActive:'']}>今日收入</Text>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.cash.today_income==0?style.nameInfoActive:'']}>{fen_to_yuan(loginState.statisticsDetail.cash.today_income)}</Text>
                            </View>
                            <ProgressBarAndroid
                                styleAttr="Horizontal"
                                indeterminate={false}
                                color={"#4B8AF2"}
                                progress={cash ? loginState.statisticsDetail.cash.today_income/cash : 0}
                            />
                        </View>
                        <View style={style.progressLi}>
                            <View style={style.titleInfo}>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.cash.today_outcome==0?style.nameInfoOut:'']}>今日支出</Text>
                                <Text style={[style.nameInfo,loginState.statisticsDetail.cash.today_outcome==0?style.nameInfoOut:'']}>-{fen_to_yuan(loginState.statisticsDetail.cash.today_outcome)}</Text>
                            </View>
                            <ProgressBarAndroid
                                styleAttr="Horizontal"
                                indeterminate={false}
                                color={"#F02A4B"}
                                progress={cash ? loginState.statisticsDetail.cash.today_outcome/cash : 0}
                            />
                        </View>
                    </View>

                </View>
            )
        }
    }
    //渲染总充值金额
    _renderRecharge(){
        let{loginState} = this.props;
        if(loginState.statisticsDetail.recharge){
            return(
                <View style={style.flex1}>
                    <Text style={style.topic}>总充值金额</Text>
                    <Text style={style.lastNum}>{fen_to_yuan(loginState.statisticsDetail.recharge.total_balance_amount)}</Text>
                    <View>
                        <View style={style.progressLi}>
                            <View style={style.titleInfo}>
                                <Text style={style.nameInfo}>充值笔数</Text>
                                <Text style={style.nameInfo}>{loginState.statisticsDetail.recharge.count_balance_orders}</Text>
                            </View>
                            <ProgressBarAndroid
                                styleAttr="Horizontal"
                                indeterminate={false}
                                progress={1}
                                color={'#4B8AF2'}
                            />
                        </View>
                    </View>
                </View>
            )
        }
    }
    //退出登录
    _removeToken(){
        storage.remove({
            key:'user-token'
        });
        Actions.reset('LoginPage')
    }

    render(){
        let{loginState} = this.props;
        return (
            <View style={style.container}>
                <StatusBar hidden={true} />
                {/*中间主要内容*/}
                <View style={style.content}>
                    {/*第一个：总单据数*/}
                    <View style={style.flex1}>
                        <Text style={style.topic}>总单据数</Text>
                        <Text style={style.num}>{loginState.statisticsDetail.total_order}</Text>
                        {/*进度条列表*/}
                        <View>
                            <View style={style.progressLi}>
                                <View style={style.titleInfo}>
                                    <Text style={style.nameInfo}>门店</Text>
                                    <Text style={style.nameInfo}>{loginState.statisticsDetail.shop_total_order}</Text>
                                </View>
                                <ProgressBarAndroid
                                    styleAttr="Horizontal"
                                    indeterminate={false}
                                    progress={1}
                                />
                            </View>
                            <View style={style.progressLi}>
                                <View style={style.titleInfo}>
                                    <Text style={style.nameInfo}>退货</Text>
                                    <Text style={style.nameInfo}>{loginState.statisticsDetail.refund.refundReturn}</Text>
                                </View>
                                <ProgressBarAndroid
                                    styleAttr="Horizontal"
                                    indeterminate={false}
                                    progress={1}
                                />
                            </View>
                            <View style={style.progressLi}>
                                <View style={style.titleInfo}>
                                    <Text style={style.nameInfo}>换货</Text>
                                    <Text style={style.nameInfo}>{loginState.statisticsDetail.refund.refundExchange}</Text>
                                </View>
                                <ProgressBarAndroid
                                    styleAttr="Horizontal"
                                    indeterminate={false}
                                    progress={1}
                                />
                            </View>

                        </View>

                    </View>
                    {/*第二个：总销售额*/}
                    {this._renderSales()}
                    {/*第三个：总现金*/}
                    {this._renderCash()}
                    {/*第四个：总充值金额*/}
                    {this._renderRecharge()}

                </View>
                {/*收营员和登录时间*/}
                <View style={style.loginTime}>
                    <Text style={style.txt}>收营员：{this.state.clerkInfo.name}</Text>
                    <Text style={style.txt}>本次登录时间：{this.state.loginTime}</Text>
                </View>
                {/*登出按钮*/}
                <TouchableNativeFeedback onPress={()=>this._removeToken()}>
                    <View style={style.btnBox}>
                        <View style={style.outBtn}>
                            <Text style={style.btnColor}>登出</Text>
                        </View>
                    </View>
                </TouchableNativeFeedback>


            </View>
        );

    }
}
 const style = StyleSheet.create({
     container:{
         backgroundColor:white
     },
     content:{
         flexDirection:'row',
         height:525,
     },
     flex1:{
         flex:1,
         alignItems: 'center'
     },
     topic:{
         color:'#202020',
         fontSize:16,
         textAlign:'center',
         paddingVertical:28
     },
     num:{
         color: '#4B8AF2',
         fontSize: 28,
         textAlign: 'center',
         lineHeight:40,
         borderRightWidth:1,
         borderColor:'#D8D8D8',
         width:'100%',
         marginBottom:40
     },
     lastNum:{
         color: '#4B8AF2',
         fontSize: 28,
         textAlign: 'center',
         lineHeight:40,
         marginBottom:40
     },
     progressLi:{
         width:198,
         marginBottom:25
     },
     titleInfo:{
         flexDirection:'row',
         justifyContent:'space-between',
         paddingBottom:4
     },
     nameInfo:{
         fontSize:14,
         color:'#4A4A4A',
         lineHeight:20
     },
     nameInfoActive:{
         fontSize:14,
         color:'#4B8AF2',
         lineHeight:20
     },

     nameInfoOut:{
         fontSize:14,
         color:'#F02A4B',
         lineHeight:20
     },
     loginTime:{
         marginHorizontal:54,
         flexDirection:'row',
         justifyContent:'space-between',
         height: 54,
         alignItems: 'center',
         borderTopWidth:1,
         borderTopColor:'#F0F0F5'
     },
     txt:{
         fontSize:14,
         color:'#4A4A4A'
     },
     btnBox:{
         flexDirection:'row',
         height:84,
         alignItems:'center',
         justifyContent:'center',
         borderTopWidth:1,
         borderTopColor:'#DBDBDB',
     },
     outBtn:{
         paddingHorizontal:60,
         paddingVertical:8,
         backgroundColor: mainBackgroundColor,
         borderRadius:4
     },
     btnColor:{
         color:'#ffffff',
         fontSize:18
     }


 })

export default connect(state =>({
    loginState: state.login
}),dispatch =>({
    loginAction: bindActionCreators(loginActions,dispatch)
}))(LoginOut);